<template>
  <div class="genus-statistics container-bottom-20">
    <div class="clearfix box-container">
        <CardBox title="科属统计" :showTab="true" :tabs=tabs @tab-change="handleTabChange">科属统计</CardBox>
    </div>
    <div class="content-container content-container-height-262">
        <div class="genus-statistics-chart" ref="genusStatisticsChart" style="height: 262px;"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import CardBox from '@/components/Global/CardBox.vue'
export default {
    name: 'GenusStatistics',
    components: {
        CardBox
    },
    data() {
        return {
            tab:{
                id: 'family_chinese_name',
                name: '科统计'
            },
            tabs: [
                {
                    id: 'family_chinese_name',
                    name: '科统计'
                },
                {
                    id: 'genus_chinese_name',
                    name: '属统计'
                }
            ],
            genusStatisticsChart: null,
            handleGenusStatisticsChartResize: null,
            genusStatisticsData: {
                categories: ['苏铁科', '松科', '柏科', '南阳杉科', '木兰科'],
                values: [1000, 600, 580, 800, 700],
                details: [
                    { value: 322, label: '苏铁科' },
                    { value: 223, label: '松科' },
                    { value: 361, label: '柏科' },
                    { value: 13, label: '南阳杉科' },
                    { value: 100, label: '木兰科' }
                ]
            }
        }
    },
    mounted() {
        this.getData();
    },
    beforeDestroy(){
        // Clean up monitor chart
        if (this.genusStatisticsChart) {
            this.genusStatisticsChart.dispose()
            this.genusStatisticsChart = null
        }
        if (this.handleGenusStatisticsChartResize) {
            window.removeEventListener('resize', this.handleGenusStatisticsChartResize)
        }
    },
    methods: {
        handleTabChange(tab){
            this.tab=tab;
            this.getData();
        },
        getData(){
            this.$api.patrol.groupByType(this.tab.id).then(res => {
                if(res&&res.length>0){
                    var le=10;
                    if(res.length<10){
                        le=res.length;
                    }
                    const items=res.splice(0,le)
                    this.genusStatisticsData.categories= items.map(item => (
                        item[this.tab.id]
                    ));
                    this.genusStatisticsData.values= items.map(item => (
                        item.count
                    ));
                    this.genusStatisticsData.details= items.map(item => (
                        { value: item.count, label: item[this.tab.id] }
                    ));
                    this.initGenusStatisticsChart();
                }

            });
        },
        initGenusStatisticsChart() {
            const chartDom = this.$refs.genusStatisticsChart;
            if (!chartDom) {
                console.warn('Chart container not found');
                return;
            }

            const chart = echarts.init(chartDom);

            const option = {
                title:{
                    subtext: '数量',
                    subtextStyle: {
                        color: '#fff',
                        position: 'right',
                        fontFamily: 'DIN Pro'
                    }
                },
                backgroundColor: 'transparent',
                grid: {
                    left: '5%',
                    right: '5%',
                    top: '15%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: this.genusStatisticsData.categories,
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 12,
                        interval: 0,
                        rotate: 0
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 12
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    backgroundColor: 'rgba(0,24,106,0.9)',
                    borderColor: 'rgba(0,150,255,0.3)',
                    textStyle: {
                        color: '#fff',
                        fontFamily: 'DIN Pro'
                    },
                    formatter: function(params) {
                        const data = params[0];
                        return `${data.name}: ${data.value}`;
                    }
                },
                series: [{
                    data: this.genusStatisticsData.values,
                    type: 'bar',
                    barWidth: '40%',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#25CDE9' },
                            { offset: 1, color: 'rgba(37, 205, 233, 0.1)' }
                        ]),
                    },
                    label: {
                        show: true,
                        position: 'top',
                        color: '#fff',
                        fontSize: 12,
                        fontFamily: 'DIN Pro'
                    }
                }]
            };

            chart.setOption(option);
            this.genusStatisticsChart = chart;

            // 添加自适应大小
            const handleResize = () => {
                chart && chart.resize();
            };
            window.addEventListener('resize', handleResize);
            this.handleGenusStatisticsChartResize = handleResize;

            // 确保图表立即适应容器大小
            this.$nextTick(() => {
                chart.resize();
            });
        }
    }
}
</script>  
<style scoped lang="scss">
.genus-statistics {

}
</style>



